<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" @click="exportXlsx">导出Excel</el-button>
            </div>
            <el-table :data="tableData" border class="table" header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="name" label="瓷砖类型"></el-table-column>
                <el-table-column prop="sno" label="瓷砖编号"></el-table-column>
                <el-table-column prop="class" label="生产流水线"></el-table-column>
                <el-table-column prop="age" label="缺陷类型"></el-table-column>
                <el-table-column prop="sex" label="色差类型"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts" name="export_data">
import { ref } from 'vue';
import * as XLSX from 'xlsx';

interface TableItem {
    id: number;
    name: string;
    sno: string;
    class: string;
    age: string;
    sex: string;
}

const tableData = ref<TableItem[]>([]);
// 获取表格数据
const getData = () => {
    tableData.value = [
      {
        "id": 1,
        "name": "防滑砖",
        "sno": "Tile-1686323",
        "class": "169流水线",
        "age": "1个缺陷(缺边)",
        "sex": "大色差"
      },
      {
        "id": 2,
        "name": "马赛克",
        "sno": "Tile-4697270",
        "class": "215流水线",
        "age": "1个缺陷(破损)",
        "sex": "微小色差"
      },
      {
        "id": 3,
        "name": "抛光砖",
        "sno": "Tile-7696445",
        "class": "263流水线",
        "age": "1个缺陷(缺边)",
        "sex": "大色差"
      },
      {
        "id": 4,
        "name": "马赛克",
        "sno": "Tile-5710319",
        "class": "201流水线",
        "age": "无缺陷",
        "sex": "大色差"
      },
      {
        "id": 5,
        "name": "马赛克",
        "sno": "Tile-2116802",
        "class": "238流水线",
        "age": "无缺陷",
        "sex": "无色差"
      },
      {
        "id": 6,
        "name": "瓷质砖",
        "sno": "Tile-8956153",
        "class": "174流水线",
        "age": "无缺陷",
        "sex": "无色差"
      },
      {
        "id": 7,
        "name": "超薄砖",
        "sno": "Tile-5208494",
        "class": "144流水线",
        "age": "3个缺陷(色斑、裂纹、缺角)",
        "sex": "无色差"
      },
      {
        "id": 8,
        "name": "通体砖",
        "sno": "Tile-4028712",
        "class": "140流水线",
        "age": "无缺陷",
        "sex": "大色差"
      },
      {
        "id": 9,
        "name": "瓷质砖",
        "sno": "Tile-4297248",
        "class": "217流水线",
        "age": "3个缺陷(色斑、裂纹、缺角)",
        "sex": "无色差"
      },
      {
        "id": 10,
        "name": "通体砖",
        "sno": "Tile-4045580",
        "class": "257流水线",
        "age": "1个缺陷(破损)",
        "sex": "大色差"
      },
      {
        "id": 11,
        "name": "釉面砖",
        "sno": "Tile-3871601",
        "class": "230流水线",
        "age": "2个缺陷(裂纹、色斑)",
        "sex": "无色差"
      },
      {
        "id": 12,
        "name": "釉面砖",
        "sno": "Tile-2320705",
        "class": "131流水线",
        "age": "2个缺陷(裂纹、色斑)",
        "sex": "大色差"
      },
      {
        "id": 13,
        "name": "瓷质砖",
        "sno": "Tile-3078121",
        "class": "196流水线",
        "age": "1个缺陷(破损)",
        "sex": "大色差"
      },
      {
        "id": 14,
        "name": "仿古砖",
        "sno": "Tile-2279671",
        "class": "272流水线",
        "age": "2个缺陷(裂纹、色斑)",
        "sex": "无色差"
      },
      {
        "id": 15,
        "name": "仿古砖",
        "sno": "Tile-9777434",
        "class": "186流水线",
        "age": "2个缺陷(裂纹、色斑)",
        "sex": "微小色差"
      }
    ]
    ;
};
getData();

const list = [['序号', '姓名', '工号', '班级', '年龄', '性别']];
const exportXlsx = () => {
    tableData.value.map((item: any, i: number) => {
        const arr: any[] = [i + 1];
        arr.push(...[item.name, item.sno, item.class, item.age, item.sex]);
        list.push(arr);
    });
    let WorkSheet = XLSX.utils.aoa_to_sheet(list);
    let new_workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(new_workbook, WorkSheet, '第一页');
    XLSX.writeFile(new_workbook, `表格.xlsx`);
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #f56c6c;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
